$color1:#C1C1C1;
$color2:#8a8a8a;
$color3:#5c5d5e;
$line:#242424;
$btn:#E4EBF7;
$appBack:#0F1011;
.btn.van-button{
	color: #fff;
	&.on{
		background: #143566;
		border:0;
	}
	&.off{
		background:#B4C2D6;
		border:0;
	}
}
.wraper{
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	&.theme-dark{
		background: $appBack;
		.mark{
			.box{
				background:$line;
				h1{ color: $color1;}
				h2{ color: $color2;}
				.btn{
					color: #3572DB;
					&::before{
						border-top:1px solid rgba(255, 255, 255, .08);
					}
				}
			}
		}
		.line,.nav-bar{
			background: $appBack;
		}
		.nav-bar{
			.arrow{
				background-image: url('../../static/images/back-white2.png');
				background-size:50% 50%;
			}
		}
		.btn.van-button{
			color: #0C0D0E;
			&.on{
				background: #E4EBF7;
				border:0;
			}
			&.off{
				background:rgba(228,235,247,0.3);
				border:0;
			}
		}
		.content{
			.input{
				color: $color1;
			}
			.label{
				color: $color2;
			}
			h1{
				color: $color1;
			}
			input,textarea{
				background:none;
				color: $color1;
				&::-webkit-input-placeholder{
					color: $color3;
				}
			}
			.item .input textarea{
				border:1px solid $line;
			}
			.item .input:after{
				border-bottom:1px solid $line;
			}
		}
	}
	.content{
		padding: 1.1rem 0.3rem 0 0.3rem;
		color: #2E3A4D;
		text-align: left;
		font-size: 0.24rem;
		h1{
			font-size: 0.5rem;
			font-weight: bold;
		}
		p.info{
			color: #D04B61;
			line-height: 1.4;
			margin-top:0.2rem;
		}
		.item{
			margin-top: 0.45rem;
			.label{
				font-weight: bold;
				margin-bottom: 0.18rem;
			}
			.input{
				overflow: hidden;
				position: relative;
				height: 0.8rem;
				line-height: 0.8rem;
				font-size: 0.3rem;
				font-weight: 500;
				display: flex;
				justify-content: space-between;
				align-items: stretch;
				.list{
					padding-top: 0.2rem;
					li{
						background-color: #9AA6B8;
						color: #fff;
						font-size: 0.22rem;
						height: 0.4rem;
						line-height: 0.4rem;
						padding: 0 0.18rem 0 0.12rem;
						border-radius: 3px;
						float: left;
						margin: 0 0.2rem 0.2rem 0;
						position: relative;
						span.close{
							width: 0.26rem;
							height: 0.26rem;
							border-radius: 50%;
							position: absolute;
							right: -0.13rem;
							top: -0.13rem;
							background: url('../../static/images/close.png') no-repeat center center;
							background-size: 100% 100%;
						}
					}
				}
				input{
					width: 70%;
					height: 0.8rem;
					line-height: 0.8rem;
					box-sizing: border-box;
					font-size: 0.3rem;
					font-weight: 400;
				}
				textarea{
					width: 100%;
					height: 100%;
					line-height: 1.6;
					border: 1px solid #CED5E0;
					box-sizing: border-box;
					padding: 0.1rem;
					margin-top: 0.1rem;
				}
				&:after{
					content: '';
					height: 1px;
					border-bottom: 1px solid #CAD3E0;
					position: absolute;
					right: 0;
					bottom: 0;
					left: 0;
					transform: scaleY(0.5);
				}
				span.arrow{
					width: 0;
					height: 0;
					border-top: 0.1rem solid #6D7B8F;
					border-left: 0.1rem solid transparent;
					border-right: 0.1rem solid transparent;
					position: absolute;
					right: 0.2rem;
					top: 0.4rem;
					animation:transform 0.3s linear;
					&.up{
						transform:  rotate(180deg);
					}
				}
				.send{
					font-size: 0.28rem;
					font-weight: 400;
					a{
						color: #3572DB;
					}
					span{
						color: #888;
					}
				}
			}
			&.name{
				margin-top: 0.55rem;
			}
			&.hidden{
				display: none;
				opacity: 0.4;
			}
		}
		.check{
			margin: 0.4rem 0 0.8rem 0;
			font-size: 0.28rem;
			color: #6D7B8F;
			overflow: hidden;
			.ch{
				float: left;
			}
			.agreement{
				float: left;
				padding-top: 0.06rem;
				padding-left: 0.08rem;
				color: #3572DB;
			}
		}
		.btn{
			width: 100%;
			margin-bottom: 1rem;
		}
	}
	.mark{
		background-color: rgba(0,0,0,.5);
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		.box{
			width: 84%;
			padding-top: 0.4rem;
			border-radius: 8px;
			background-color: #fff;
			text-align: center;
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			h1{
				margin-top: 0.5rem;
				img{
					width: 2.6rem;
				}
			}
			h2{
				font-size: 0.36rem;
				color:#000;
				font-weight: bold;
				padding: 0.6rem 0 0.2rem 0;
			}
			p{
				color: #6D7B8F;
				font-size: 0.26rem;
				line-height: 1.6;
				padding: 0 0.4rem;
			}
			.btn{
				font-size: 0.32rem;
				color: #3572DB;
				height: 0.95rem;
				line-height: 0.95rem;
				text-align: center;
				font-weight: 500;
				margin-top: 0.8rem;
				position: relative;
				&:before{
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					border-top: 1px solid #E8E8E8;
					transform: scaleY(0.5);
				}
			}
		}
	}
	.line{
		z-index: 1;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		height: 1rem;
		background-color: #fff;
	}
	.nav-bar{
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin-bottom: 0;
		padding-bottom: 0.1rem;
		z-index: 2;
		position: fixed;
		.center{
			color: #2E3E4D;
			font-size: 0.3rem;
			font-weight: 600;
			height: 0.8rem;
			line-height: 0.8rem;
		}
		.right{
			width: 0.8rem;
			height: 0.8rem;
		}
		.arrow{
			background-image: url('../../static/images/back-black.png');
		}
	}
	&.padTop{
		.line{
			height: 1.6rem;
		}
		.content{
			padding-top: 1.1rem;
		}
	}
}

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder,input[readonly="readonly"]::-webkit-input-placeholder {
    color: #9BA7B8;
} 
input:-moz-placeholder,textarea:-moz-placeholder,input[readonly="readonly"]:-moz-placeholder { 
    color: #9BA7B8;
} 
input::-moz-placeholder,textarea::-moz-placeholder ,input[readonly="readonly"]::-moz-placeholder {
    color: #9BA7B8;
} 
input:-ms-input-placeholder,textarea:-ms-input-placeholder ,input[readonly="readonly"]:-ms-input-placeholder {
    color: #9BA7B8;
}